<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>过渡效果</title>
        <style type="text/css">
            .wrapper {
                width: 200px;
                height: 200px;
                border: 1px solid blue;
                margin: 50px auto;
            }


            .first {
                transition: width 3s linear 5s;
            }
            
            .first:hover {
                width: 300px;
                background: #dfdfdf;
            }

            .second {
                transition: all 3s linear 500ms;
            }
            
            .second:hover {
                width: 300px;
                background: #dfdfdf;
            }
        </style>
    </head>

    <body>

        <div class="wrapper first">
            天地玄黄
        </div>

        <div class="wrapper second">
            小琴是个好姑娘
        </div>

    </body>
</html>
